import logoDark from "./logo-dark.svg";
import logoLight from "./logo-light.svg";
import { routesConfig } from "../routes";

// 动态解析路由配置
const parseRoutes = () => {
  console.log("routesConfig:", routesConfig); // 调试信息

  const routes: Array<{ path: string; name: string; component: string }> = [];

  if (!routesConfig || !Array.isArray(routesConfig)) {
    console.error("routesConfig is not an array:", routesConfig);
    return routes;
  }

  routesConfig.forEach((routeConfig: any, index: number) => {
    console.log(`Route ${index}:`, routeConfig);

    if (routeConfig.type === "index") {
      // 首页路由
      routes.push({
        path: "/",
        name: routeConfig.name || "首页",
        component: routeConfig.component || "home.tsx",
      });
    } else if (routeConfig.type === "route") {
      // 普通路由
      routes.push({
        path: routeConfig.path || "/",
        name: routeConfig.name || "",
        component: routeConfig.component || "",
      });
    }
  });

  console.log("Parsed routes:", routes); // 调试信息
  return routes;
};

export function Welcome() {
  // 动态获取路由列表
  const routes = parseRoutes();

  return (
    <main className="flex items-center justify-center pt-16 pb-4">
      <div className="flex-1 flex flex-col items-center gap-16 min-h-0">
        {" "}
        {/* 路由菜单导航 */}
        <div className="max-w-[800px] w-full space-y-6 px-4">
          <div className="rounded-3xl border border-gray-200 p-6 dark:border-gray-700">
            <h2 className="text-xl font-semibold text-center mb-6 text-gray-800 dark:text-gray-200">
              页面导航菜单 (共 {routes.length} 个页面)
            </h2>
            {routes.length === 0 ? (
              <div className="text-center text-gray-500 dark:text-gray-400">
                暂无路由数据，请检查控制台调试信息
              </div>
            ) : (
              <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                {routes.map((route) => (
                  <a
                    key={route.path}
                    href={route.path}
                    className="group flex items-center justify-center p-4 leading-normal text-blue-700 hover:bg-blue-50 dark:text-blue-500 dark:hover:bg-blue-900/20 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-blue-300 dark:hover:border-blue-600 transition-all duration-200"
                  >
                    <div className="text-center">
                      <div className="font-medium">{route.name}</div>
                      <div className="text-sm text-gray-500 dark:text-gray-400 mt-1">
                        {route.path}
                      </div>
                    </div>
                  </a>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </main>
  );
}
